<html>

<head>
    <meta charset="utf-8" />
    <title>AJAXJS Web UI Demo</title>
    <link rel="stylesheet" type="text/css" href="../../dist/css/base.css" />
    <link rel="stylesheet" type="text/css" href="../common/demo.css" />

    <link crossorigin="anonymous" integrity="sha384-FckWOBo7yuyMS7In0aXZ0aoVvnInlnFMwCv77x9sZpFgOonQgnBj1uLwenWVtsEj"
        href="https://lib.baomitu.com/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet" />
    <script src="https://lib.baomitu.com/vue/2.6.11/vue.js"></script>
</head>

<body>
    <div class="box">
        <h1>Welcome to AJAXJS Web UI</h1>
        <div>
            <menu>
                <span></span>
            </menu>
            <div class="content">
                <h2>椭圆轨迹运动动画</h2>
                <p>球沿着斜的椭圆轨迹运动</p>
                <div class="box2">
                    <div class="ball ball1">1</div>
                    <div class="ball ball2">2</div>
                    <div class="ball ball3">3</div>
                    <div class="ball ball4">4</div>
                </div>

                <style>
                    @keyframes spin {
                        0% {
                            transform: rotate(-30deg) scaleY(.5) rotate(0deg);
                        }

                        100% {
                            transform: rotate(-30deg) scaleY(.5) rotate(360deg);
                        }
                    }

                    @keyframes anti-spin {
                        0% {
                            transform: rotate(0deg) scaleY(2) rotate(30deg) scale(1);
                        }

                        100% {
                            transform: rotate(-360deg) scaleY(2) rotate(30deg) scale(1);
                        }
                    }

                    .box2 {
                        position: relative;
                        padding: 50px;
                        width: 250px;
                        height: 250px;
                        border-radius: 50%;
                        background: yellow;
                        animation: spin 3s infinite linear;
                    }

                    .box2 .ball {
                        display: inline-block;
                        background: blue;
                        width: 20px;
                        height: 20px;
                        border-radius: 50%;
                        animation: anti-spin 3s infinite linear;
                        color: #fff;
                        position: absolute;
                        text-align: center;
                    }

                    .box2 .ball.ball1 {
                        left: 45px;
                        top: 45px;
                    }

                    .box2 .ball.ball2 {
                        right: 45px;
                        top: 45px;
                    }

                    .box2 .ball.ball3 {
                        right: 45px;
                        bottom: 45px;
                    }

                    .box2 .ball.ball4 {
                        left: 45px;
                        bottom: 45px;
                    }

                    .box2:hover,
                    .box2:hover .ball,
                    .box2 .ball:hover {
                        animation-play-state: paused;
                    }
                </style>
            </div>
            <div class="copyright">
                <div></div>
            </div>
        </div>
    </div>
    <script src="../common/demo.js"></script>
</body>

</html>